import React, { createContext, useState, useEffect, useRef } from 'react';
import { Toast } from 'antd-mobile'
import HeadTop from '@/components/HeadTop';
import ListItem from '../_parts/ListItem';
import ModalSpare from '../_parts/ModalSpare';
import { validatenull } from "@/utils/validate";
import { listFieldsDetail } from '../_parts/const';
import ApiIndex from '@/api/index'
import "./index.less"
import { MyContext } from '@/context/index';
const { Provider } = MyContext

function Index (props) {
    const [inputVal, setInputVal] = useState('');
    const [List, setList] = useState([]); //列表
    const { history } = props
    const [ListRowIndex, setListRowIndex] = useState(null);
    const [ListRow, setListRow] = useState({});
    const [toolListParamList, setToolListParamList] = useState([]); //提交得列表
    const ModalSpareRef = useRef(null)

    const [Loading, setLoading] = useState(false); //提交loading

    useEffect(() => {
        getRequest()
    }, []);

    const getRequest = async () => {
        let res = await ApiIndex.getAllByIoNo(props.location.state.no)
        if (res.data.code) {
            Toast.show({
                content: '请求失败:' + res.data.msg,
            })
            return
        }
        let list = res.data.data
        setList(list)
    }

    const getRow = (row) => {
        if (parseInt(row.sendNum) > +parseInt(List[ListRowIndex].number)) {
            Toast.show({
                content: '实际入库数量大于总入库数量',
            })

            return
        }

        List.splice(ListRowIndex, 1, {
            ...List[ListRowIndex],
            sendNum: row.sendNum,
            status: 'PROCESSED'
        })
        setList([...List])

        toolListParamList.push({
            number: List[ListRowIndex].sendNum,
            toolCode: List[ListRowIndex].toolCode,
        })
        setToolListParamList([...toolListParamList])
        ModalSpareRef.current.setVisible(false)
        setInputVal('')
    }

    // 搜索
    const sendHandlePressVal = (value) => {
        if (validatenull(value)) return
        setInputVal(value)
        let _value = value
        if (value.indexOf("*") != -1) {
            _value = value.split("*")[0]
        }
        let index = List.findIndex(el => el.toolCode == _value)
        if (index == -1) {
            Toast.show({
                content: '扫描的条码，不是入库明细的条码'
            })
            return
        }

        setListRowIndex(index)
        setListRow(List[index])
        ModalSpareRef.current.setVisible(true)
    }

    const handSubmit = () => {
        if(Loading) return
        let som = List.some(el=> el.status == 'WAIT_PROCESS')
        if(som){
            Toast.show({
                content: '请处理完所有数据'
            })
            return
        }
        let tp = List.map( el=>{
            return{
                number: el.sendNum,
                toolCode: el.toolCode
            }
        })

        let params = {
            no: props.location.state.no,
            toolListParamList: tp,
        }
        setLoading(true)
        ApiIndex.confirmIn(params).then(res => {
            setLoading(false)
            if (!res.data.code) {
                Toast.show({
                    content: '入库成功'
                })
                props.history.goBack(-1)
            } else {
                Toast.show({
                    content: res.data.msg
                })
            }
        })
    }

    return (
        <div className='page-wrapper return-page'>
            <Provider value={{ placeholderTxt: "请输入备件条码", inputVal: inputVal }}>
                <HeadTop
                    title="扫码入库"
                    history={history}
                    search={true}
                    sendHandlePressVal={sendHandlePressVal}
                ></HeadTop>
            </Provider>
            <div className="body-no">
                <span>总入库数量：
                    {
                        List.length > 0 ?
                            List.reduce((pr, nx) => { return pr + nx.number }, 0) : 0
                    }
                </span>
                <span>入库编号：{props.location.state.no}</span>
            </div>
            <div className="page-body" style={{ padding: 15 }}>
                {
                    List.length > 0 ?
                        List.map(el => <ListItem
                            key={el.id}
                            item={el}
                            history={history}
                            listFields={listFieldsDetail}
                        ></ListItem>)
                        : <div className='no-list-data'>
                            无更多数据
                        </div>
                }
            </div>
            <div className="page-footer" onClick={handSubmit}>
                提交
            </div>
            <ModalSpare
                ref={ModalSpareRef}
                modalTitle="扫码入库"
                ListRow={ListRow}
                getRow={getRow}></ModalSpare>
        </div>
    );
}

export default Index;
